<nz-layout>
  <div class="l-group">
    <nz-input [nzType]="'search'" [nzPlaceHolder]="'输入标签名称'" [(ngModel)]="labelParams.labelName" style="width: 200px;" (nzOnSearch)="onSearch($event)"></nz-input>

    <!-- 操作 -->
    <div class="l-operate" style="float:right;">
      <nz-avatar nz-tooltip="添加" [nzShape]="'square'" *authority="['tag/list/3']" [nzIcon]="'plus-square-o'" (click)="showModal()"></nz-avatar>
      <nz-avatar nz-tooltip="删除" [nzShape]="'square'" *authority="['tag/list/4']" [nzIcon]="'delete'" (click)="delete('')"></nz-avatar>
      <nz-avatar nz-tooltip="刷新" [nzShape]="'square'" [nzIcon]="'sync'" (click)="refresh()"></nz-avatar>
    </div>
  </div>

  <div class="l-group">
    <nz-table #nzTable [nzAjaxData]="data"
      [nzLoading]="_loading"
      [nzTotal]="labelParams.totalPages"
      [(nzPageIndex)]="labelParams.pageNumber"
      [(nzPageSize)]="labelParams.pageSize"
      (nzPageIndexChange)="pageChange(true)"
      (nzPageSizeChange)="pageChange(true)"
      [nzScroll]="{y:300}"
      nzBordered nzShowSizeChanger>
      <ng-template #nzFixedHeader>
        <thead nz-thead>
          <tr>
            <th nz-th nzCheckbox [nzWidth]="'10px'">
              <label nz-checkbox [(ngModel)]="_allChecked" [nzIndeterminate]="_indeterminate" (ngModelChange)="_checkAll($event)">
              </label>
            </th>
            <th nz-th [nzWidth]="'400px'">
              <span>标签名称</span>
            </th>
            <th nz-th [nzWidth]="'250px'">
              <span>可选项</span>
            </th>
            <th nz-th [nzWidth]="'100px'">
              <span>操作</span>
            </th>
          </tr>
        </thead>
      </ng-template>
      <tbody nz-tbody>
        <tr nz-tbody-tr *ngFor="let data of nzTable.data">
          <td nz-td nzCheckbox>
            <label nz-checkbox [(ngModel)]="data.checked" (ngModelChange)="_refreshStatus($event)">
            </label>
          </td>
          <td nz-td>
            {{data.name}}
          </td>
          <td nz-td>
            <span *ngFor="let opt of data.optionals;let i = index;">
              {{ i > 0 ? ',  ':'' }}{{ opt.attributeValue }}
            </span>
          </td>
          <td nz-td>
            <nz-dropdown [nzPlacement]="'bottomRight'">
              <a class="ant-dropdown-link" nz-dropdown>
                <i class="anticon anticon-ellipsis"></i>
              </a>
              <ul nz-menu>
                <li nz-menu-item *authority="['tag/list/2']">
                  <a (click)="update(data)">编辑</a>
                </li>
                <li nz-menu-item *authority="['tag/list/4']">
                  <a (click)="delete(data)">删除</a>
                </li>
              </ul>
            </nz-dropdown>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </div>

  <!-- alert -->
  <nz-modal [nzVisible]="isVisible" [nzTitle]="'添加标签'" [nzContent]="modalContent" (nzOnCancel)="handleCancel($event)" (nzOnOk)="handleOk($event)">
    <ng-template #modalContent>
      <div class="l-group">
        <!-- <form nz-form [nzLayout]="validateForm.controls?.formLayout?.value" 
          [formGroup]="validateForm" (ngSubmit)="submitForm()"> 
          formControlName="materialName"
        -->
    
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSpan]="8">
              <label nz-form-item-required>标签名称</label>
            </div>
            <div nz-form-control nz-col [nzSpan]="10">
              <nz-input [(ngModel)]="addLabelParams.name" [nzSize]="'large'">
              </nz-input>
              <!-- <div nz-form-explain *ngIf="validateForm.controls.materialName.dirty&&validateForm.controls.materialName.hasError('required')">请输入标签名称!</div> -->
            </div>
          </div>
    
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSpan]="8">
              <label>可选项</label>
            </div>
            <div nz-form-control nz-col [nzSpan]="10" style="color: #d6e1f1;font-size: 18px;">
              <i nz-tooltip="添加新标签" class="anticon anticon-plus-circle"
                (click)="alertAddLabel()"></i>
            </div>
          </div>
        <!-- </form> -->
        <div nz-form-item nz-row *ngFor="let label of addLabelParams.attributeList;let i = index;">
          <div nz-form-label nz-col [nzSpan]="8"></div>
          <div nz-form-control nz-col [nzSpan]="10">
            <nz-input [(ngModel)]="label.attributeValue" [nzPlaceHolder]="'请输入标签名'"></nz-input>
          </div>
          <div nz-form-control nz-col [nzOffset]="1" [nzSpan]="2" style="color: #d6e1f1;font-size: 18px;">
            <i (click)="deleteAddLabel(label)" nz-tooltip="删除该标签" class="anticon anticon-delete"></i>
          </div>
        </div>
      </div>
    </ng-template>
  </nz-modal>

</nz-layout>
